<div class="row">
    <div class="col-md-12">
        <div class="box">
            <div class="box-header with-border">
                <!-- <h3 class="box-title">List of taxonomies</h3> -->
                <datalist-header title="List of taxonomies" list="$vm.list" total="$vm.allTaxonomyCount">
                </datalist-header>
            </div>
            <div class="box-body">
                <div ng-include="'views/partials/admin/taxonomy/list/toolbar.html'"></div>

                <div class="mt-xs filter-panel" ng-include="'views/partials/admin/taxonomy/list/filters.html'"
                    ng-show="$vm.filtering.context.showFilters"></div>

                <div class="row mt-xs">
                    <div class="col-md-12 clearfix">

                        <filters-preview filters="$vm.filtering.context.filters" on-clear-item="$vm.removeFilter(field)"
                            on-clear-all="$vm.clearFilters()"></filters-preview>
                    </div>
                </div>

                <div class="row mv-s" ng-show="$vm.loading === false && $vm.list.values.length === 0">
                    <div class="col-md-12">
                        <div class="empty-message">No taxnomies found.</div>
                    </div>
                </div>

                <div class="row mv-s" ng-show="$vm.loading === true">
                    <div class="col-md-12">
                        <div class="loading-message">
                            <i class="fa fa-circle-o-notch fa-spin fa-fw"></i>
                            <span>loading taxonomies...</span>
                        </div>
                    </div>
                </div>

                <!-- Datalist  -->
                <div class="row mt-s" ng-if="$vm.loading === false && $vm.list.values.length > 0">
                    <psearch control="$vm.list"></psearch>

                    <div class="col-md-12">
                        <table class="table table-striped case-list">
                            <thead>
                                <tr>
                                    <th width="10"></th>
                                    <th width="300">Namespace</th>
                                    <th>Description</th>
                                    <th width="100" class="text-center">Version</th>
                                    <th width="80" class="text-center"># Tags</th>
                                    <th width="120"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="taxonomy in $vm.list.values">
                                    <td>
                                        <span class="clickable"
                                            ng-click="$vm.addFilterValue('enabled', !!taxonomy.extraData.enabled)">
                                            <i class="fa" ng-class="{
                                                    true: 'text-tlp-green fa-circle',
                                                    false: 'text-tlp-red fa-circle',
                                                }[!!taxonomy.extraData.enabled]"></i>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="taxonomy-name">
                                            <a href ng-click="$vm.show(taxonomy)">{{::taxonomy.namespace}}</a>
                                        </div>
                                    </td>
                                    <td class="wrap">
                                        {{::taxonomy.description}}
                                    </td>
                                    <td class="text-center">
                                        {{::taxonomy.version}}
                                    </td>
                                    <td class="text-center">
                                        {{::taxonomy.tags.length}}
                                    </td>
                                    <td class="clearfix">
                                        <div class="pull-right">
                                            <a class="btn btn-icon btn-clear" href ng-click="$vm.toggleActive(taxonomy)"
                                                uib-tooltip="{{!!taxonomy.extraData.enabled ? 'Disable taxonomy' : 'Enable taxonomy'}}">

                                                <i class="fa" ng-class="{
                                                    true: 'fa-times-circle text-danger',
                                                    false: 'fa-check-circle text-success'
                                                }[!!taxonomy.extraData.enabled]"></i>
                                            </a>

                                            <a class="btn btn-icon btn-clear" href ng-click="$vm.show(taxonomy)"
                                                uib-tooltip="Edit taxonomy">
                                                <i class="text-primary fa fa-search"></i>
                                            </a>

                                            <a class="btn btn-icon btn-clear" href ng-click="$vm.remove(taxonomy)"
                                                uib-tooltip="Delete taxonomy">
                                                <i class="text-danger fa fa-trash"></i>
                                            </a>
                                        </div>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <psearch control="$vm.list"></psearch>
                </div>
            </div>
        </div>
    </div>
</div>
